<template>
    <div class="rich-text-wrapper">
        <iframe
            frameborder="0"
            allowtransparency="true"
            :style="{ width: '100%' }"
            @load="resize"
            :src="domainRelaxUrl"
            ref="iframe"
        >
        </iframe>
        <photo-swiper
            ref="photoswiper"
            v-if="photoSwiperUseable"
        ></photo-swiper>
    </div>
</template>
<script>

import { messageCallback } from '@/lib/iframeResizer-handler';
import photoSwiper from '@/components/photoSwiper/photoSwiper.vue';
// eslint-disable-next-line import/no-absolute-path
const iFrameResize = require('/public/static/ruiyun2-mooc-web/plugins/iframe-resizer/js/iframeResizer.js');

const MceViewer = {
    name: 'mce-viewer',
    props: {
        authorInfo: {
            type: Object,
            default() {
                return {};
            }
        },
        photoSwiperUseable: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ''
        },
        customStyles: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            iframe: null
        };
    },
    components: {
        photoSwiper
    },
    computed: {
        customCss() {
            return `
        * { padding:0; margin:0; }
        body {
          font-family: PingFangSC-Regular;
          color: #111a38;
          width: 100%;
          /*word-break: break-all;
          white-space: pre-wrap; */
          overflow-wrap: break-word;
          -webkit-line-break: after-white-space;
          word-wrap: break-word;
        }
        em {
          font-style: italic;
        }
        img {
          cursor: pointer;
          max-width: 100%;
          height: auto;
        }
        a {
          cursor: pointer;
          text-decoration: none;
        }
        iframe {
          width: 100%;
        }
        p {
          line-height: 1.6;
          margin: 0px;
        }
        table {
          word-wrap: break-word;
          word-break: break-all;
          max-width: 100%;
          border: none;
          border-color: #999;
        }
        ul,
        ol {
          list-style-position: inside;
        }
        ul {
          list-style: inherit;
          list-style-position: inside;
        }
        strong {
          font-weight: bold;
        }
        ${this.customStyles}
      `;
        },
        iframeHTML() {
            const StaticBaseURL = `${process.env.BASE_URL}plugins`;
            console.log(StaticBaseURL);
            return `<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" \/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" \/><link rel="stylesheet" type="text/css" href="${StaticBaseURL}/tinymce/skins/lightgray/skin.min.css" \/><link rel="stylesheet" type="text/css" href="${StaticBaseURL}/tinymce/skins/lightgray/content.min.css" \/><style type="text/css">${this.customCss}<\/style><script src="${process.env.BASE_URL}static/ruiyun2-mooc-web/plugins/lib-flexible/flexible.js"><\/script><script src="${StaticBaseURL}/iframe-resizer/js/iframeResizer.contentWindow.min.js"><\/script><script src="${StaticBaseURL}/iframe-resizer/content.js"><\/script><\/head><body><\/body><\/html>`;
        },
        domainRelaxUrl() {
            return `javascript:(function(){document.open();document.domain='${document.domain}';document.write('${this.iframeHTML}');document.close();})()`;
        }
    },
    methods: {
        setContent() {
            const self = this;
            self.iframe.iFrameResizer.sendMessage({
                type: 'replace',
                content: self.content || ''
            });
            // const iframeBody = self.getDoc().body;
            // const $iframeBody = jQuery(iframeBody);
            // const $iframeBody = jQuery(this.iframeBody);
            // this.iframeBody && (this.iframeBody.innerHTML = self.content || '');
            // $iframeBody.html(self.content || '');
            // $iframeBody.find("a").each(function(index, ele) {
            //   const $a = jQuery(ele);
            //   $a.bind("click", function(e) {
            //     event.preventDefault();
            //     if ($a.attr("target") === "_blank") {
            //       const newWindow = window.open($a.attr("href"));
            //     } else {
            //       window.location.href = $a.attr("href");
            //     }
            //   });
            // });
            // if (self.photoSwiperUseable) {
            //   // const imgEles = $iframeBody.find('img').filter(function() {
            //   //   return !!jQuery(this).attr('src');
            //   // })
            //   const imgEles = $iframeBody.find("img");
            //   let slides = [];
            //   imgEles.each(function(index, ele) {
            //     const $img = jQuery(ele);
            //     const imgUrl = $img.attr("src");
            //     slides.push({
            //       src: imgUrl,
            //       thumbnail: imgUrl
            //     });
            //     $img.bind("click", function() {
            //       self.$refs.photoswiper._open(slides, index, self.authorInfo);
            //     });
            //   });
            // }
        },
        resize() {
            const self = this;
            iFrameResize(
                {
                    checkOrigin: false,
                    initCallback: function (iframe) {
                        iframe.iFrameResizer.sendMessage({
                            type: 'initialize',
                            data: {
                                photoSwiperUseable: self.photoSwiperUseable
                            }
                        });
                        self.iframe = iframe;
                        self.setContent(self.content);
                    },
                    messageCallback: function (data) {
                        const message = data.message;
                        if (message.type === 'jump') {
                            self.$emit('jump', data);
                            messageCallback(data);
                        } else if (message.type === 'photoView') {
                            self.$refs.photoswiper._open(
                                ...message.data,
                                self.authorInfo
                            );
                        }
                    }
                },
                self.$refs.iframe
            );
        },
        getWin() {
            var self = this.$refs.iframe;
            var elm;
            if (!self.contentWindow) {
                elm = self.iframeElement;
                if (elm) {
                    self.contentWindow = elm.contentWindow;
                }
            }
            return self.contentWindow;
        },
        getDoc() {
            var self = this.$refs.iframe;
            var win;
            if (!self.contentDocument) {
                win = this.getWin();
                if (win) {
                    self.contentDocument = win.document;
                }
            }
            return self.contentDocument;
        }
    },
    install(Vue) {
        Vue.component('Mce-viewer', MceViewer);
    },
    watch: {
        content() {
            if (this.iframe) {
                this.setContent();
            } else {
                this.resize();
            }
        }
    }
};
export default MceViewer;
</script>
<style lang="scss">
.rich-text-wrapper {
    color: #111a38;
    width: 100%;
    word-break: break-all;
    em {
        font-style: italic;
    }
    img {
        cursor: pointer;
        max-width: 100%;
        height: auto;
    }
    a {
        text-decoration: none;
    }
    iframe {
        width: 100%;
    }
    p {
        line-height: 1.6;
        margin: 0px;
    }
    table {
        word-wrap: break-word;
        word-break: break-all;
        max-width: 100%;
        border: none;
        border-color: #999;
    }
    .mce-object-iframe {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    ul,
    ol {
        list-style-position: inside;
    }
    ul {
        list-style: inherit;
        list-style-position: inside;
    }
    strong {
        font-weight: bold;
    }
}
</style>
